import { useState, useEffect } from 'react';
import Taro, { useDidShow, useRouter } from '@tarojs/taro';
import api from "@/service/apiRequest"
import { View, Text} from '@tarojs/components';
import { AtButton } from 'taro-ui';
import './index.scss';
import AvatarComponent from '@/components/avatarCard';

import "taro-ui/dist/style/components/button.scss";


function PetDetail() {
	const [petInfo, setPetInfo] = useState<PetInfo | null>(null);
	const router = useRouter();
	const { id } = router.params;

	useDidShow(() => {
		if (id) {
			getPetInfo(id);
		}
	});

	

	const getPetInfo = async (id) => {
		let res = await api.get(`/api/pets/index/${id}`);
		setPetInfo(res);
	};

	const requestDeletePet = async (id) => {
		let res = await api.get(`/api/pets/remove/${id}`);
		return res;
	}

	const handleEdit = () => {
		if (petInfo) {
			Taro.navigateTo({
				url: `/petProfile/pages/edit/index?id=${petInfo.id}`
			});
		}
	};

	const calculateAge = (birthDateStr: string) => {
		const birthDate = new Date(birthDateStr);
		const today = new Date();

		let years = today.getFullYear() - birthDate.getFullYear();
		let months = today.getMonth() - birthDate.getMonth();

		if (months < 0) {
			years -= 1;
			months += 12;
		}

		return `${years ? years + '岁' : ''}${months ? months + '个月' : ''}`;
	};

	const handleDelete = () => {
		Taro.showModal({
			title: '删除宠物',
			content: `确定要删除${petInfo?.petName}的档案吗？`,
			success: async (res) => {
				if (res.confirm) {
					let result = await requestDeletePet(petInfo?.id);
					if (result) {
						Taro.navigateBack();
					}
					
				}
			}
		});
	}

	const transformGender = (gender: string) => {
		return gender === '0' ? '男孩儿' : '女孩儿';
	}

	if (!petInfo) {
		return <View className='pet-detail-error'>未找到宠物信息</View>;
	}

	const handlePreviewImage = () => {
		if (!petInfo.petAvatarIcon) {
			return;
		}
		Taro.previewMedia({
			sources: [{url: petInfo.petAvatarIcon}]
		})
	};

	return (
		<View className='pet-detail-container'>
			{/* 宠物头像和基本信息 */}
			<View className='pet-header'>
				<AvatarComponent
					avatar={petInfo.petAvatarIcon}
					username={petInfo.petName}
					descInfo={`${petInfo.petBreed} · ${transformGender(petInfo.petGender)} · ${calculateAge(petInfo.birthDate)}`}
					avatarSize='big'
					onClick={handlePreviewImage}
				/>
			</View>

			{/* 基本信息卡片 */}
			<View className='info-card'>
				<View className='card-header'>
					<Text className='card-title'>基本信息</Text>
					<Text className='edit-link' onClick={handleEdit}>编辑</Text>
				</View>

				<View className='info-grid'>
					<View className='info-item'>
						<Text className='info-label'>生日</Text>
						<Text className='info-value'>{petInfo.birthDate}</Text>
					</View>

					<View className='info-item'>
						<Text className='info-label'>品种</Text>
						<Text className='info-value'>{petInfo.petBreed}</Text>
					</View>

					<View className='info-item'>
						<Text className='info-label'>性别</Text>
						<Text className='info-value'>{transformGender(petInfo.petGender)}</Text>
					</View>

					<View className='info-item'>
						<Text className='info-label'>体重</Text>
						<Text className='info-value'>{petInfo.petWeight}kg</Text>
					</View>

					{/* <View className='info-item'>
						<Text className='info-label'>毛色</Text>
						<Text className='info-value'>黄白色</Text>
					</View>

					<View className='info-item'>
						<Text className='info-label'>绝育状态</Text>
						<Text className='info-value'>已绝育 (2023-05-10)</Text>
					</View> */}
				</View>
			</View>

			{/* 性格特点卡片 */}
			{/* <View className='info-card'>
        <View className='card-header'>
          <Text className='card-title'>性格特点</Text>
        </View>
        
        <View className='personality-content'>
          <Text className='personality-text'>{petInfo.personality}</Text>
        </View>
      </View> */}

			{/* 健康记录卡片 */}
			{/* <View className='info-card'>
				<View className='card-header'>
					<Text className='card-title'>健康记录</Text>
					<Text className='add-link' onClick={handleAddHealthRecord}>添加记录</Text>
				</View>

				<View className='health-records'>
					{petInfo.healthRecords.map(record => (
						<View key={record.id} className='health-record-item'>
							<View className='record-icon'>
								{record.type === '三联疫苗' && <IconFont name='pet-vaccine' size={24} color='#ff7a59' />}
								{record.type === '体内驱虫' && <IconFont name='pet-medicine' size={24} color='#ff7a59' />}
								{record.type === '年度体检' && <IconFont name='pet-health' size={24} color='#ff7a59' />}
							</View>
							<View className='record-info'>
								<Text className='record-type'>{record.type}</Text>
								<Text className='record-date'>{record.date}</Text>
							</View>
							<View className='record-status'>
								{record.completed && <Text className='status-completed'>已完成</Text>}
							</View>
						</View>
					))}
				</View>
			</View> */}
			<View className='footer-bar-wrapper'>
          <View 
            className='submit-btn'
            onClick={handleDelete}
          >
            删除
          </View>
        </View>
		</View>
	);
}

export default PetDetail;